window.addEventListener('load',_=>{
	"use strict";
	// localStorage.setItem('todolist',JSON.stringify([{index:0,isDone:false,data:'Hello 欢迎您使用todolst'}]));
	class Todo {
		constructor() {
			this.addBtn = document.querySelector('.addToDoList');
			this.editBtn = document.querySelector('.editToDoList');
			this.deleteBtn = document.querySelector('.deleteToDoList');
			this.searchBtn = document.querySelector('.searchToDoList');
			this.isDoneBtn = document.querySelector('.isDoneToDoList');
			this.dataInput = document.querySelector('.todolist_show textarea');
			this.ul = document.querySelector('.todolist_list ul');
			this.lis = new WeakSet();
			this.doneClass = 'check_list';
		}
		run() {
			//初始化
			this.createList();
			//添加数据
			this.addList();
			//删除数据
			this.deleteList();
			//修改数据
			this.editList();
			//查找数据
			this.searchList();
			// this.checkedList();
			// this.randomColorList();
		}
		createList() {
			//获取内存数据
			let arrDataToDoList = this.getData();
			if (!arrDataToDoList || arrDataToDoList.length == 0) {
				//页面没有便签，内存也没有数据
				this.ul.innerHTML = `空白`;
				this.ul.classList.add('todolist_empty');
			} else {
				// 新数据渲染到页面
				this.render(arrDataToDoList);
			}
		}
		//获取内存数据
		getData() {
			//获取旧数据
			let dataToDoList = localStorage.getItem('todolist');
			//处理旧数据
			return dataToDoList ? JSON.parse(dataToDoList) : [];
		}
		addList() {
			this.addBtn.addEventListener('click', _ => {
				//获取新数据
				let data = this.dataInput.value.trim();
				if (data) {
					//获取旧数据
					let arrDataToDoList = this.getData();
					let index = 0,
						isDone = false;
					let randomColor = `
					rgba(${Math.round(Math.random()*(255-0))+0},
					${Math.round(Math.random()*(255-0))+0},
					${Math.round(Math.random()*(255-0))+0},
					${Math.random()})`;
					arrDataToDoList.length > 0 ? index = arrDataToDoList[arrDataToDoList.length - 1].index +
						1 : 0;
					arrDataToDoList.push({
						index,
						isDone,
						randomColor,
						data
					});
					//置空 移类
					this.dataInput.value = '';
					this.ul.innerHTML = ``;
					this.ul.classList.remove('todolist_empty');
					// 将存储加载到页面
					this.render(arrDataToDoList);
				} else {
					alert('什么都没有……')
				}
			})
		}
		// 将存储加载到页面
		render(arrDataToDoList) {
			//存数据
			localStorage.setItem('todolist', JSON.stringify(arrDataToDoList));
			//加载页面内容
			this.ul.innerHTML = arrDataToDoList
				.reverse()
				.reduce((pre, item) =>
					pre +=
					`<li 
				index="${item.index}" 
				isDone="${item.isDone}" 
				class="${item.isDone?this.doneClass:''}"
				style="background:${item.randomColor};">
				<p>${item.data}</p>
				<input type="checkbox" />
				</li>`,
					'');
			// this.checkedList();
			//设置编号index
			this.showList();
		}
		//独立展示每个便签的内容
		showList() {
			let arrDataToDoList = this.getData();
			[...this.ul.children].forEach(item => {
				item.addEventListener('click', e => {
					//阻止冒泡
					e.stopPropagation();
					//去除 内容 内的标签
					const reg = /<[\s\S]+>([\s\S]+?)<\/[\s\S]+>/;
					let pInnerHTMl = item.children[0].innerHTML;
					pInnerHTMl = pInnerHTMl.replace(reg, (v, p1) => p1);
					this.dataInput.value = pInnerHTMl;
					//给删除 编辑 完成按钮加上索引
					let index = item.getAttribute('index');
					this.deleteBtn.setAttribute('index', index);
					this.editBtn.setAttribute('index', index);
					this.isDoneBtn.setAttribute('index', index);
					//判断完成后 完成按钮的内容变化
					if (arrDataToDoList[index].isDone) {
						this.isDoneBtn.innerHTML = '取消';
					} else {
						this.isDoneBtn.innerHTML = '完成';
					}
					//点击标签 同时改变背景颜色
					document.body.style.background = arrDataToDoList[index].randomColor;
					document.body.style.transition = `background 2s`;
				})
			});
			this.isDoneList();
		}
		deleteList() {
			this.deleteBtn.addEventListener('click', e => {
				let arrDataToDoList = this.getData();
				let index = e.target.getAttribute('index');
				//删除对应索引 并 重新排列数据
				arrDataToDoList
					.splice(index, 1);
				arrDataToDoList.map((item, i, arr) => item.index = i);
				//置空
				this.dataInput.value = '';
				this.render(arrDataToDoList);
			})
		}
		editList() {
			this.editBtn.addEventListener('click', e => {
				//获取旧数据
				let arrDataToDoList = this.getData();
				//获取新数据
				let data = this.dataInput.value.trim();
				//新替换旧 index v.data=data
				let index = e.target.getAttribute('index') - 0;
				let isDone = false;
				arrDataToDoList.splice(index, 1, {
					index,
					isDone,
					data
				});
				this.dataInput.value = '';
				this.render(arrDataToDoList);
			})
		}
		searchList() {
			this.searchBtn.addEventListener('click', _ => {
				//获取新数据
				let searchInput = document.querySelector('[name="todolist_search"]');
				let data = searchInput.value.trim();
				let reg = new RegExp(data, 'i');
				if (data) {
					//获取旧数据
					let arrDataToDoList = this.getData();
					let str = `<span class="color_show">${data}</span>`;
					//查找匹配
					this.ul.innerHTML = arrDataToDoList.reduce((pre, v) => {
						if (reg.test(v.data)) {
							pre.unshift(`
							<li index="${v.index}" 
							style="background:${v.randomColor};">
							<p>${v.data.replace(data,str)}</p>
							<input type="checkbox" />
							</li>`);
						} else {
							pre.push(`
							<li index="${v.index}" 
							style="background:${v.randomColor};">
							<p>${v.data}</p>
							<input type="checkbox" />
							</li>`);
						}
						return pre;
					}, []).join('');
					this.showList();
				} else {
					alert('请输入关键字')
				}
			})
		}
		//完成
		isDoneList() {
			//拿数据
			let arrDataToDoList = this.getData();
			//改变按钮文字
			this.isDoneBtn.addEventListener('click', e => {
				//做数据
				let index = e.target.getAttribute('index');
				let checkboxs = document.querySelectorAll('[type="checkbox"]');
				if (arrDataToDoList[index].isDone) {
					arrDataToDoList[index].isDone = false;
					this.isDoneBtn.innerHTML = '完成';
				} else {
					arrDataToDoList[index].isDone = true;
					this.isDoneBtn.innerHTML = '取消';
				}
				// let status=arrDataToDoList.every(v=>v.isDone=true);
				// console.log(status);
				//保存
				this.render(arrDataToDoList);
			})
		}
		
		// 随机颜色
		// randomColorList() {
		// 	// let randomNumber=Math.random()*(255-0)+0;
		// 	let randomColor =
		// 		`rgba(${Math.random()*(255-0)+0},${Math.random()*(255-0)+0},${Math.random()*(255-0)+0},.5)`;
		// 	console.log(randomColor);
		// }
	
		//选中便签
	// 	checkedList() {
	// 		// //拿数据
	// 		// let arrDataToDoList=this.getData();
	// 		//做数据
	// 		document.querySelector('.allToDoList').addEventListener('click', e => {
	// 			document.querySelectorAll('[type="checkbox"]').forEach(v => v.checked = true);
	// 		});
	// 		document.querySelector('.notAllToDoList').addEventListener('click', e => {
	// 			document.querySelectorAll('[type="checkbox"]').forEach(v => v.checked = false);
	// 		});
	// 		document.querySelector('.invertToDoList').addEventListener('click', e => {
	// 			document.querySelectorAll('[type="checkbox"]').forEach(v => v.checked = !v.checked);
	// 		})
	// 		//保存
	// 		// this.render(arrDataToDoList);
	// 	}
	
	}
	new Todo().run();
})